<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t("项目关键指标规划") }}</span>
    </div>
    <!-- <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('指标')" prop="versionName">
        <el-input
          v-model="queryParams.versionName"
          :placeholder="$t('指标')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="queryHandle"
          >{{ $t("搜索") }}</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
          $t("重置")
        }}</el-button>
      </el-form-item>
    </el-form> -->

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:index:edit']"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addHandle"
        >{{ $t('新增') }}</el-button>
      </el-col>

    </el-row> -->

    <el-table
      v-loading="loading"
      :data="dealIndexList"
      border
      tooltip-effect="darkTable"
    >
      <el-table-column
        :label="$t('序号')"
        type="index"
        align="center"
        show-overflow-tooltip
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('指标')" align="center" prop="name" />
      <el-table-column :key="dealStatus" :label="$t('投前版本')" align="center" prop="v1">
        <template v-if="dealStatus" slot="header">
          <span>{{ $t("投前版本") }}</span>
          <i
            class="el-icon-edit-outline"
            style="
              display: inline-block;
              margin: 2px auto;
              font-size: 16px;
              cursor: pointer;
            "
            @click="addHandle(vId1, 'TQBB')"
          />
        </template>
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.v1) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="!dealStatus" :label="$t('定位版本')" align="center" prop="v2">
        <template slot="header">
          <span>{{ $t("定位版本") }}</span>
          <i
            class="el-icon-edit-outline"
            style="
              display: inline-block;
              margin: 2px auto;
              font-size: 16px;
              cursor: pointer;
            "
            @click="addHandle(vId1, 'DWBB')"
          />
        </template>
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.v2) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="!dealStatus" :label="$t('最新版本')" align="center" prop="v3">
        <template slot="header">
          <span>{{ $t("最新版本") }}</span>
          <i
            class="el-icon-edit-outline"
            style="
              display: inline-block;
              margin: 2px auto;
              font-size: 16px;
              cursor: pointer;
            "
            @click="addHandle(vId1, 'ZXBB')"
          />
        </template>
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.v3) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改项目关键指标规划对话框 -->
    <el-dialog
      :title="$t(title)"
      :visible.sync="formOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class="dialogForm"
      append-to-body
    >
      <dealIndexForm ref="dealIndexForm" />
    </el-dialog>
  </div>
</template>

<script>
import {
  listDealIndex,
  delDealIndex,
  exportDealIndex
} from '@/api/deal/estate/index/dealIndex'

import dealIndexForm from './dealIndexForm.vue'
export default {
  components: {
    dealIndexForm
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      vId1: '',
      vId2: '',
      vId3: '',
      // 项目状态
      dealStatus: true,
      indexList: [],
      // 总条数
      total: 0,
      // 项目关键指标规划表格数据
      dealIndexList: [],
      // 弹出层标题
      title: '项目关键指标规划',
      // 是否显示弹出层
      formOpen: false,
      // 查询参数
      queryParams: {
        dealId: this.$route.query.id,
        versionName: undefined,
        isAutoUpdate: undefined,
        plotRatio: undefined,
        calculateArea: undefined,
        vendibilityArea: undefined,
        noVendibilityArea: undefined,
        totalNumber: undefined,
        originalPrice: undefined,
        synthesisPrice: undefined,
        directInvestment: undefined,
        vendibilityPrice: undefined,
        totalValue: undefined,
        exceptDirectInvestment: undefined,
        marketingCost: undefined,
        manageCost: undefined,
        financeCost: undefined,
        totalCost: undefined,
        onePrice: undefined,
        oneCost: undefined,
        developLoans: undefined,
        capitalPeak: undefined,
        atCashProfit: undefined,
        atProperty: undefined,
        atTotalProfit: undefined,
        preAtCostProfit: undefined,
        takeBackTime: undefined,
        irr: undefined,
        roi: undefined,
        dealAveragePrice: undefined,
        fundAveragePrice: undefined,
        fundAspect: undefined,
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询项目关键指标规划列表 */
    getList() {
      this.loading = true
      listDealIndex(this.queryParams).then((response) => {
        const list = response.rows
        this.indexList = response.rows
        let v1 = null
        let v2 = null
        let v3 = null
        if (list.length > 0) {
          this.vId1 = response.rows[0].versionId
          const status = response.rows[0].dealStatus
          if (status === 'TQ' || status === 'CB' || status === 'ZZ') {
            this.dealStatus = true
          } else {
            this.dealStatus = false
          }

          v1 = new Map(Object.entries(list[0]))
        }
        if (list.length > 1) {
          v1 = new Map(Object.entries(list[0]))
          v2 = new Map(Object.entries(list[1]))
        }
        if (list.length > 2) {
          v1 = new Map(Object.entries(list[0]))
          v2 = new Map(Object.entries(list[1]))
          v3 = new Map(Object.entries(list[2]))
        }
        const keys = [
          '土地面积(平方米)',
          '除地价外直接投资(亿元)',
          '容积率(%)',
          '计算面积(平方米)',
          '可售面积(平方米)',
          '土地成本(亿元)',
          '土地调整(亿元)',
          '可售楼面价(元/平方米)',
          '总货值(亿元)',
          '总成本(亿元)',
          '单方售价(元/平方米)',
          '单方成本(元/平方米)',
          '开发贷款金额(亿元)',
          '资金峰值(亿元)',
          '税后现金利润(亿元)',
          '税后总利润(亿元)',
          '税前成本利润率(%)',
          '收回股东投入期限(月)',
          '自有资金IRR',
          '投资回报倍数'
        ]
        const value = [
          'acreage',
          'directInvestment',
          'plotRatio',
          'calculateArea',
          'vendibilityArea',
          'acreageCost',
          'acreageAdjust',
          'vendibilityPrice',
          'totalValue',
          'totalCost',
          'onePrice',
          'oneCost',
          'developLoans',
          'capitalPeak',
          'atCashProfit',
          'atTotalProfit',
          'preAtCostProfit',
          'takeBackTime',
          'irr',
          'roi'
        ]
        const newArr = []
        for (var i = 0; i < keys.length; i++) {
          const obj = {
            name: keys[i],
            v1: v1 == null ? '' : v1.get(value[i]),
            v2: v2 == null ? '' : v2.get(value[i]),
            v3: v3 == null ? '' : v3.get(value[i])
          }
          newArr.push(obj)
        }

        this.dealIndexList = newArr
        // this.total = response.total;
        this.loading = false
      })
    },

    // 表单重置
    reset() {
      this.form = {
        id: undefined,

        versionName: undefined,

        isAutoUpdate: undefined,

        plotRatio: undefined,

        calculateArea: undefined,

        vendibilityArea: undefined,

        noVendibilityArea: undefined,

        totalNumber: undefined,

        originalPrice: undefined,

        synthesisPrice: undefined,

        directInvestment: undefined,

        vendibilityPrice: undefined,

        totalValue: undefined,

        exceptDirectInvestment: undefined,

        marketingCost: undefined,

        manageCost: undefined,

        financeCost: undefined,

        totalCost: undefined,

        onePrice: undefined,

        oneCost: undefined,

        developLoans: undefined,

        capitalPeak: undefined,

        atCashProfit: undefined,

        atProperty: undefined,

        atTotalProfit: undefined,

        preAtCostProfit: undefined,

        takeBackTime: undefined,

        irr: undefined,

        roi: undefined,

        dealAveragePrice: undefined,

        fundAveragePrice: undefined,

        fundAspect: undefined,

        remark: undefined,

        createBy: undefined,

        createTime: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle(id, type) {
      if (type === 'ZXBB' && this.indexList.length < 2) {
        return this.$message(this.$t('请先添加定位版本'))
      }
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.dealIndexForm.init(id, type)
      })
    },
    /** 修改按钮操作 */
    updateHandle(row) {
      this.formOpen = true
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.dealIndexForm.init(row)
      })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(function() {
          return delDealIndex(row.id)
        })
        .then(() => {
          this.getList()
          this.msgSuccess(this.$t('删除成功'))
        })
        .catch(function() {})
    },
    /** 导出按钮操作 */
    exportHandle() {
      const queryParams = this.queryParams
      this.$confirm(this.$t('是否确认导出数据项?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(function() {
          return exportDealIndex(queryParams)
        })
        .then((response) => {
          this.download(response.msg)
        })
        .catch(function() {})
    }
  }
}
</script>
